<template>
  <div>
    <Button type="primary" @click="modal1 = true">点击查看列表</Button>
    <Modal
      v-model="modal1"
      title="学生信息列表"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <Table :columns="stu_info" :data="info_data" border></Table>
    </Modal>
  </div>
</template>
<script lang="js">

export default {
  data() {
    return {
      modal1: false,
      stu_info: [
          {
              type:'index',
              title:"id",
              key:'id',
              width:60,
              align:'center'
          },
          {
              title:'姓名',
              key:'name',
              width:200,
              align:'center'
          },
          {
              title:'所属班级',
              key:'class',
              width:200,
              align:'center'
          }
      ],
      info_data:[
          {
              'id':"1001",
              'name':"张三",
              'class':'高三一班'
          },
          {
              'id':'1002',
              'name':'李四',
              'class':'高三二班'
          }
      ]
    };
  },
  methods: {
    ok() {
      this.$Message.success("Clicked ok");
    },
    cancel() {
      this.$Message.error("Clicked cancel");
    },
  },
};
</script>
